<template>
	<view class="main-container" style="background-image: linear-gradient(to bottom, #dceaff, #ffffff);">
		<view class="content" style="padding: 0 30rpx;">
			<view class="sd_box">
				<view class="sd_box_list">
					<view class="ft_ft_box">
						<view class="ft_ft_info">
							<view style="font-weight: 900;">
								商家入住请先联系该校区客服
							</view>
						</view>
					</view>
				</view>
				<view class="sd_box_list">
					<view class="ft_ft_box">
						<view class="ft_ft_info" style="display: flex;">
							<view style="color: #3c91ff;">
								当前校区：
							</view>
							<view style="font-weight: 800;">
								{{schoolName}}
							</view>
						</view>
					</view>
					<navigator url="/package/pages/selectSchool/selectSchool"
						style="background-color: #f5f5f5; padding: 10rpx 20rpx; border-radius: 20rpx;">
						更换校区
					</navigator>
				</view>

				<view class="sd_box_list">
					<view class="ft_ft_box">
						<view class="ft_ft_info">
							<view>
								店铺简介
							</view>
						</view>
					</view>
				</view>
				<view class="sd_box_list">
					<textarea style="width: 100%; border: 1rpx solid #3c91ff; border-radius: 20rpx; padding: 20rpx;"
						placeholder="请输入店铺介绍" v-model="shopIntro" />
				</view>
				<view class="sd_box_list">
					<view class="ft_ft_box">
						<view class="ft_ft_info">
							<view>
								申请人姓名
							</view>
						</view>
					</view>
					<view style="width: 32%;">
						<input type="text" placeholder="申请人姓名" v-model="applicantName" />
					</view>
				</view>
				<view class="sd_box_list">
					<view class="ft_ft_box">
						<view class="ft_ft_info">
							<view>
								申请人手机号
							</view>
						</view>
					</view>
					<view style="width: 32%;">
						<input type="text" placeholder="申请人手机号" v-model="applicantPhone" />
					</view>
				</view>

			</view>
		</view>
		<view style="padding: 80rpx;">
			<button style="background-color: #3c91ff; color: white; border-radius: 50rpx; width: 100%;"
				@click="submitApplication">提交申请</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getSchoolList
	} from '@/api/index.js'

	import {
		addShangHuShenQing
	} from '@/api/xiaoquan.js'
	const schoolId = ref(null);
	const schoolName = ref('请选择大学');
	const applicantName = ref('');
	const applicantPhone = ref('');
	const shopIntro = ref('');

	// 加载时获取用户信息和学校信息
	onLoad(() => {
		getLoginInfo();
		fetchSchoolData();
	})

	// 显示时更新校区信息
	onShow(() => {
		setTimeout(() => {
			const selectedSchoolId = uni.getStorageSync('school_id');
			const selectedSchoolName = uni.getStorageSync('school_name');

			if (selectedSchoolId && selectedSchoolName) {
				schoolId.value = selectedSchoolId;
				schoolName.value = selectedSchoolName;
			}
		}, 100);
	})

	// 获取登录信息
	const getLoginInfo = () => {
		const userInfo = uni.getStorageSync("userInfo");
		if (userInfo) {
			// 如果用户信息中已经有校区ID，可以直接使用
			if (userInfo.depid) {
				schoolId.value = userInfo.depid;
			}
		}
	}

	// 获取学校数据
	const fetchSchoolData = () => {
		getSchoolList().then(res => {
			if (res.data && res.data.data && res.data.data.length > 0) {
				// 如果已经有校区ID，找到对应的校区名称
				if (schoolId.value) {
					const school = res.data.data.find(item => item.id == schoolId.value);
					if (school) {
						schoolName.value = school.name;
					}
				}
			}
		}).catch(error => {
			console.error('获取学校列表失败:', error);
		});
	}

	// 提交申请
	const submitApplication = () => {
		// 验证必填字段
		if (!schoolId.value || !schoolName.value) {
			uni.showToast({
				title: '请选择校区',
				icon: 'none'
			});
			return;
		}

		if (!applicantName.value) {
			uni.showToast({
				title: '请输入申请人姓名',
				icon: 'none'
			});
			return;
		}

		if (!applicantPhone.value) {
			uni.showToast({
				title: '请输入申请人手机号',
				icon: 'none'
			});
			return;
		}

		// 手机号格式验证
		const phonePattern = /^1[3-9]\d{9}$/;
		if (!phonePattern.test(applicantPhone.value)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return;
		}

		// 准备提交的数据 - 使用驼峰命名
		const applicationData = {
			schoolId: schoolId.value,
			schoolName: schoolName.value,
			applicantName: applicantName.value,
			applicantPhone: applicantPhone.value,
			shopIntro: shopIntro.value
		};

		console.log('提交的申请数据:', applicationData);

		// TODO: 这里应该调用API提交数据
		// 示例API调用:
		addShangHuShenQing(applicationData).then((res) => {
			console.log(res, 111111)
			if (res.code === 200) {
				uni.showToast({
					title: '申请提交成功',
					icon: 'success'
				});
				// 延迟1000毫秒（1秒）后返回上一级
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);

			} else {
				uni.showToast({
					title: res.message || '申请提交失败',
					icon: 'none'
				});
			}
		})

	}
</script>

<style>
	.main-container {
		background-image: linear-gradient(to bottom, #dceaff, #ffffff);
	}

	.content {
		padding: 0 30rpx;
	}

	.sd_box {
		background-color: white;
		border-radius: 20rpx;

	}

	.sd_box_list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #e8f2ff;
		padding: 20rpx;
	}

	.ft_ft_box {
		display: flex;
		align-items: center;
	}

	.ft_ft_info {
		margin-left: 20rpx;
	}

	input::placeholder,
	textarea::placeholder {
		color: #aaa;
	}

	.upload_box {
		height: 350rpx;
		margin: 30rpx;
		border: 1rpx solid #3c91ff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 25rpx;
		box-sizing: border-box;
	}

	button {
		padding: 20rpx;
		font-size: 34rpx;
	}
</style>